<template>
	    <el-button type="primary" size="large" plain>我参与的</el-button>
	    <el-button type="primary" size="large" plain>我管理的</el-button>
	    <el-button type="primary" size="large" plain>我负责的</el-button>
	  <hr/>
	    <el-button type="primary" text @click="dialognewProject= true">新建</el-button>
		<el-dialog v-model="dialognewProject" title="新建项目">
			项目名称：<el-input v-model="input"/>
			<hr/>
			项目负责人：<el-input v-model="leader"/>
			<hr/>
			项目参与人：<el-input v-model="Participants"/>
			<hr/>
			项目描述：
			<el-input
			    v-model="projectDescription"
			    :autosize="{ minRows: 2, maxRows: 4 }"
			    type="textarea"
			    placeholder="Please input"
			  />
			<hr/>
			<template #footer>
			  <span class="dialog-footer">
			    <el-button type="primary" @click="dialognewProject = false">确定</el-button>
			    <el-button type="primary" @click="dialognewProject = false">取消</el-button>
			  </span>
			</template>
		  </el-dialog>
		<el-button type="primary" text @click="dialogdeleteProject= true" plain>删除</el-button>
		<el-dialog v-model="dialogdeleteProject" title="删除项目">
			<template #footer>
			  <span class="dialog-footer">
			    <el-button type="primary" @click="dialogdeleteProject = false">关闭</el-button>
			    <el-button type="primary" @click="dialogdeleteProject = false">取消</el-button>
			  </span>
			</template>
		  </el-dialog>
		<el-button type="primary" plain>导出</el-button>
	 <el-input v-model="input" placeholder="输入查询内容" />
	 	<el-button type="primary"><el-icon><Search /></el-icon></el-button>
	<el-table ref="projectsTableref" :data="projects" style="width: 100%"  @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
	    <el-table-column prop="projectName" label="项目名称" width="800" />
	    <el-table-column prop="leader" label="责任人" width="100" />
	    <el-table-column prop="totalHours" label="总工时" width="100"  />
		<el-table-column prop="process" label="进度" width="100" />
		<el-table-column prop="projectStatus" label="项目状态" width="100" />
		<el-table-column prop="deptName" label="所属部门" width="100" />
		<el-table-column prop="creater" label="创建人" />
	  </el-table>
	   <div class="example-pagination-block" style="margin-right:20px">
	      <div class="example-demonstration" style="margin-right:20px"></div>
	      <el-pagination layout="prev, pager, next" :total="1000"/>
	    </div>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { ElTable } from 'element-plus'
	const dialognewProject=ref(false)
	const dialogdeleteProject = ref(false)
	const projectDescription = ref('')
	const projects = [
	  {
	    projectName:'OA系统开发',
	    leader: '姚永杰',
	    totalHours: '196H',
	    process:'50%',
	    projectStatus:'进行中',
	    deptName:'软件六班',
	    creater:'soulstar',
	  },
	]
</script>

<style>
	.el-button--text {
	  margin-right: 15px;
	}
	.el-select {
	  width: 300px;
	}
	.el-input {
	  width: 300px;
	}
	.dialog-footer button:first-child {
	  margin-right: 10px;
	}
	.example-pagination-block .example-demonstration {
	 margin-right: 20px;
	}
</style>

